<template>
	<view>
		<tn-nav-bar :isBack='true' :backTitle='" "' :bottomShadow='false' :alpha="alpha">电子卡管理</tn-nav-bar>
		<image src="/static/product/topbg.png" class="topbg" mode=""></image>
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}" class="con">
			<tn-sticky :customNavHeight='vuex_custom_bar_height'>
				<view class="tabs" :style="{background:!alpha?'#fff':''}">
					<tn-tabs :list="list" :current="current" itemWidth='50%' activeColor="#1E1E1E"
						inactiveColor="#868A8B" :barWidth='32' :barHeight='11'
						:barStyle="{background:'#45C47B',marginTop:'10rpx'}" :height='80' @change="change"
						:isScroll='false' :fontSize="28" :bold='true'></tn-tabs>
				</view>
			</tn-sticky>
			<loading v-if="loading"></loading>
			<view class="list" v-else>
				<view class="list__item" v-for="(item,index) in plist" :key="index">
					<image src="/static/product/vipcard.png" class="list__item__bg" mode=""></image>
					<view class="list__item__box">
						<view class="list__item__price">
							<view class="list__item__price__text">
								价值
								<view class="list__item__price__text__pz">
									品质之选·畅游全国
								</view>
							</view>
							<view class="list__item__price__num">
								<view class="">
									<text style="font-size: 36rpx;font-family: PingFang SC;">￥</text>{{item.price}}
								</view>
								<tn-button v-if='item.is_go==1&&item.status==2' fontColor="#5B4804" shape='round' :fontSize='24'
									width='158rpx' backgroundColor='#E4C883' height='56rpx'>待出游</tn-button>
								<tn-button v-if='item.is_go==2&&item.status==2' fontColor="#5B4804" shape='round' :fontSize='24'
									width='158rpx' backgroundColor='#E4C883' height='56rpx'>已出游</tn-button>
								<tn-button v-if='item.is_use==1&&item.status==1' @click="to('/pages/project/category?id=1&title=体验路线'+'&cardid='+item.id+'&cardnum='+item.card_no)"
									fontColor="#5B4804" shape='round' :fontSize='24' width='158rpx'
									backgroundColor='#E4C883' height='56rpx'>选择路线</tn-button>
								<tn-button v-if='item.is_use==2&&item.status==1' fontColor="#5B4804" shape='round' :fontSize='24'
									width='158rpx' backgroundColor='#E4C883' height='56rpx'
									@click="to('/pages/product/activation?id='+item.id)">确认激活</tn-button>
							</view>
						</view>
						<view class="list__item__content">
							<view class="list__item__content__item" v-for="(item1,index1) in conlist" :key="index1">
								{{index1+1}}.{{item1}}
							</view>
						</view>
						<view class="list__item__cardno">
							<view class="">
								卡号:{{item.card_no}}
							</view>
							<view class="list__item__cardno__item">
								密码:{{item.pass}}
							</view>
						</view>
						<view class="list__item__qrbox">
							<image src="https://mm.fuliaoxx.com/qrcode.png" style="width: 100%;height: 100%;" mode=""></image>
						</view>
					</view>
				</view>


				<view class="tn-safe-area-inset-bottom">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import product from '@/api/_product.js'
	export default {
		data() {
			return {
				list: [],
				status: 1,
				conlist: [
					'此卡为双人旅行卡，不可单独一人使用',
					'本卡可转让，赠予不可兑换现金',
					'本卡售出后不可退换，消费不记名',
					'本卡适用于32-62周岁，非旅游目的地本省及本省工作生活的中国汉族公民(收客要求具体见告知书)',
					'获取此卡后需提前3天预约，详情请扫小程序码咨询客服'
				],
				current: 0,
				alpha: true,
				plist: [],
				loading:true
			};
		},
		methods: {
			change(index) {
				this.current = index;
				this.status = this.list[index].status
				this.getlist()
			},
			getlist() {
				this.loading=true
				product.getCard({
					status: this.status
				}).then(res => {
					if (res.data.code == 1) {
						this.plist = res.data.data
						this.loading=false
					}
				})
			}
		},
		onLoad() {
			
		},
		onShow() {
			product.getCardStatusCount().then(res => {
				if (res.data.code == 1) {
					this.list = [{
						name: `待激活(${res.data.data.invalid})`,
						status: 1
					}, {
						name: `已激活(${res.data.data.valid})`,
						status: 2
					}]
				}
			})
			this.getlist()
		}
	}
</script>

<style lang="scss">
	.tabs {
		border-top: 2rpx solid #F4F6F8;
		padding: 10rpx 0;
	}

	.con {
		position: relative;
	}

	.list {
		padding: 0 30rpx;

		&__item {
			width: 690rpx;
			height: 443rpx;
			position: relative;
			margin-bottom: 30rpx;

			&__bg {
				width: 690rpx;
				height: 443rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			&__box {
				width: 690rpx;
				height: 443rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			&__price {
				color: #D3B468;
				position: absolute;
				top: 72rpx;
				left: 0;
				padding-left: 228rpx;
				padding-right: 42rpx;
				width: 690rpx;

				&__text {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #D3B468;
					line-height: 24rpx;
					margin-bottom: 18rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					&__pz {
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 16rpx;
						color: #A18D5C;
						line-height: 16rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}

				&__num {
					font-weight: bold;
					font-size: 52rpx;
					color: #D3B468;
					line-height: 37rpx;
					font-family: DINNextLTPro-Bold;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

			}

			&__content {
				width: 480rpx;
				// height: 199rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 18rpx;
				color: #A18D5C;
				line-height: 36rpx;
				position: absolute;
				bottom: 30rpx;
				left: 40rpx;
			}

			&__cardno {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 20rpx;
				color: #D3B468;
				line-height: 20rpx;
				position: absolute;
				top: 38rpx;
				right: 39rpx;
				display: flex;

				&__item {
					padding-bottom: 9rpx;
					border-bottom: 1rpx solid #76674A;
					margin-left: 22rpx;
				}
			}

			&__qrbox {
				width: 127rpx;
				height: 127rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				position: absolute;
				top: 205rpx;
				right: 46rpx;
			}
		}
	}
</style>